<template>
    <div class="white-box config-box">
        <detail-item title="模板名称" bottom="24px" :value="objs.express_title" />
        <detail-item title="公司名称" bottom="24px" :value="objs.company_title" />
        <detail-item title="计费方式" bottom="24px" :value="objs.valuation_type_label" />
        <detail-item title="配送备注" bottom="24px" :value="objs.intro" />
        <detail-item title="配送区域" bottom="24px">
            <div class="config-area">
                <el-button class="theme-btn" type="primary" @click.stop="clickAdd">添加配送区域</el-button>
                <!-- 按件/按重量/按体积 -->
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-if="objs.valuation_type <= 2"
                >
                    <el-table-column prop="regions_name" label="可配送区域" min-width="360"></el-table-column>
                    <el-table-column :label="labelArrs[objs.valuation_type].text" width="140">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.first_num"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 100px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.first_num">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="运费(元)" width="140">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.first_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 100px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.first_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column :label="labelArrs[objs.valuation_type].next_text" width="140">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.additional_num"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 100px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.additional_num">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="续费(元)" width="140">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.additional_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 100px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.additional_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" class-name="operation-nav" fixed="right">
                        <template #default="scope">
                            <el-button class="theme-btn" link type="primary" @click="clickEdit(scope.row, scope.$index)">编辑</el-button>
                            <el-popconfirm
                                title="是否确定删除？"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                @confirm="handleDelete(scope.row, scope.$index)"
                            >
                                <template #reference>
                                    <el-button class="theme-btn" link type="primary">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 按箱计费 -->
                <el-table
                    class="table-mb"
                    v-loading="loading"
                    :data="arr_data"
                    :header-cell-style="{ background: '#F5F7FA' }"
                    element-loading-background="rgba(255, 255, 255, 0.6)"
                    v-if="objs.valuation_type == 3"
                >
                    <el-table-column prop="regions_name" label="可配送区域" min-width="360"></el-table-column>
                    <el-table-column label="mini1" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.mini_one_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.mini_one_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="mini2" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.mini_two_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.mini_two_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="mini3" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.mini_three_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.mini_three_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="mini4" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.mini_four_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.mini_four_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="特小" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.first_num"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.first_num">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="小包" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.first_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.first_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="中包" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.additional_num"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.additional_num">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="大包" width="120">
                        <template #default="{ row }">
                            <el-input
                                v-model.trim="row.additional_amount"
                                clearable
                                placeholder="请输入"
                                oninput="value=value.replace(/[^\d.]/g,'')"
                                style="width: 90px"
                            />
                            <div class="tip-error" v-if="row.show_error && !row.additional_amount">必须填写</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" class-name="operation-nav" fixed="right">
                        <template #default="scope">
                            <el-button class="theme-btn" link type="primary" @click="clickEdit(scope.row, scope.$index)">编辑 </el-button>
                            <el-popconfirm
                                title="是否确定删除？"
                                confirm-button-text="确定"
                                cancel-button-text="取消"
                                @confirm="handleDelete(scope.row, scope.$index)"
                            >
                                <template #reference>
                                    <el-button class="theme-btn" link type="primary">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 保存 -->
                <div class="config-btn">
                    <el-button class="theme-btn" type="primary" @click="handleConfirm">保存</el-button>
                </div>
            </div>
        </detail-item>
    </div>

    <!-- 区域弹窗 -->
    <el-dialog
        class="dialog-area"
        v-model="dialogUpdate"
        title="区域选择"
        draggable
        width="800px"
        top="11vh"
        :append-to-body="true"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        @close="closeArea"
    >
        <div class="area-box">
            <el-empty description="暂无权限配置项" v-if="areaArrs.length == 0" />
            <div class="config-tree flexs" v-if="areaArrs.length > 0">
                <div class="area-one">
                    <template v-for="(item, index) in areaArrs" :key="item.code">
                        <div :class="[{ 'is-active': item.is_select }, 'area-item']" @click="area_click(index)" v-if="!item.hidden">
                            <el-checkbox v-model="item.is_select" :checked="item.is_select" @change="(val) => clickArea(val, item)" :key="item.code">
                            </el-checkbox>
                            <span class="item-text">{{ item.name }}</span>
                        </div>
                    </template>
                </div>
                <!-- 省份列表 -->
                <div class="area-one">
                    <template v-for="(item, index) in curArea.children" :key="item.code">
                        <div :class="[{ 'is-active': item.is_select }, 'area-item']" @click="prov_click(index)" v-if="!item.hidden">
                            <el-checkbox v-model="item.is_select" :checked="item.is_select" @change="(val) => clickArea(val, item)"></el-checkbox>
                            <span class="item-text">{{ item.name }}</span>
                        </div>
                    </template>
                </div>
                <!-- 城市列表 -->
                <div class="area-one">
                    <template v-for="(item, index) in curProv.children" :key="item.code">
                        <div :class="[{ 'is-active': item.is_select }, 'area-item']" @click="cityIndex = index" v-if="!item.hidden">
                            <el-checkbox v-model="item.is_select" :checked="item.is_select" @change="(val) => clickArea(val, item)"></el-checkbox>
                            <span class="item-text">{{ item.name }}</span>
                        </div>
                    </template>
                </div>
                <!-- 区域列表 -->
                <div class="area-one">
                    <template v-for="(item, index) in curCity.children" :key="item.code">
                        <div :class="[{ 'is-active': item.is_select }, 'area-item']" v-if="!item.hidden">
                            <el-checkbox v-model="item.is_select" :checked="item.is_select" @change="(val) => clickArea(val, item)"></el-checkbox>
                            <span class="item-text">{{ item.name }}</span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" :loading="form_loading" @click="confirmSelect">确定</el-button>
                <el-button @click="closeArea">取消</el-button>
            </span>
        </template>
    </el-dialog>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, computed, onBeforeUnmount } from "vue"
import { useRouter, useRoute } from "vue-router"
import GoBack from "@components/GoBack.vue"
import DetailItem from "@components/DetailItem.vue"

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

let sid = route.query.sid || ""
onMounted(() => {
    getArea()
})

onBeforeUnmount(() => {})

/**
 * 详情
 * @param {Number} objs.valuation_type 计费方式[0:按件数,1:按重量,2:按体积,3:按箱装]
 */
const objs = ref({})
const labelArrs = [
    {
        text: "首件(个)",
        next_text: "续件(个)",
    },
    {
        text: "首重(kg)",
        next_text: "续重(kg)",
    },
    {
        text: "首体积(m³)",
        next_text: "续体积(m³)",
    },
]
const regionIndex = ref([])
function getDetail() {
    proxy.$axios
        .get("express/shipping/area", {
            params: {
                shipping_id: sid,
            },
        })
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                objs.value = result
                result.valuation.length > 0 && assignArrs(areaArrs.value, result.valuation)
                reset_index()
                setTimeout(() => {
                    // 格式化数据
                    let arrs = []
                    result.valuation.map((item) => {
                        let datas = {
                            allRegions: item.allRegions,
                            first_num: item.first_num,
                            first_amount: item.first_amount,
                            additional_num: item.additional_num,
                            additional_amount: item.additional_amount,
                            province: item.province,
                            city: item.city,
                            county: item.county,
                            regions: item.regions,
                            regions_name: item.regions_name,
                        }
                        if (result.valuation_type == 3) {
                            datas.mini_one_amount = item.mini_one_amount
                            datas.mini_two_amount = item.mini_two_amount
                            datas.mini_three_amount = item.mini_three_amount
                            datas.mini_four_amount = item.mini_four_amount
                        }
                        arrs.push(datas)
                    })
                    arr_data.value = arrs
                    let indexs = []
                    areaArrs.value.map((val, index) => {
                        let flag = getSelectAll(val.children)
                        if (flag) {
                            val.hidden = flag
                            indexs.push(index)
                        }
                    })
                    regionIndex.value = indexs
                }, 100)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

/**
 * @param {Array} areas 初始大区、省市区数据
 * @param {Array} arrs 已选择的大区、省市区数据
 * @param {Array} itemArr 已选中的数据当前项及子级
 */
function assignArrs(areas, arrs, itemArr = []) {
    for (let sub of arrs) {
        sub.allRegions = get_itemArr(areas, sub.regions)
    }
}

/**
 * 遍历赋值，从返回的数据中获取值并修改初始省市区数据
 * @param {*} areas 初始数据
 * @param {*} codeArr 选中的地区编码数组
 */
function get_itemArr(areas, codeArr, arr = []) {
    for (let index = 0; index < areas.length; index++) {
        const val = areas[index]
        if (codeArr.indexOf(val.code) > -1) {
            val.is_select = true
            val.hidden = true
            arr.push(val)

            if (val.children && val.children.length > 0) {
                recursionArrs(val.children, true, true, true) // 递归遍历赋值is_select为true
            }
        } else {
            if (val.children && val.children.length > 0) {
                get_itemArr(val.children, codeArr, arr)
            }
        }
    }
    return arr
}

/**
 * 保存
 * @param {Array} arr_data 选中区域数组
 * 计费方式为“按箱装”时，字段代表的意义，其他三种：按件、按重量、按体积不变（first_num：首件/重/体积，first_amount：运费·····）
 * first_num：特小， first_amount：小包，additional_num：中包，additional_amount：大包，
 * mini_one_amount：mini1，mini_two_amount：mini2，mini_three_amount：mini3，mini_four_amount：mini4
 */
const arr_data = ref([])
const handleConfirm = () => {
    if (arr_data.value.length == 0) {
        proxy.$message({ message: "请添加配送区域配置！", type: "warning" })
        return
    }
    for (let item of arr_data.value) {
        for (let key in item) {
            if (!item[key] && key != "county" && key != "city" && key != "allRegions" && key != "province" && key != "show_error") {
                item.show_error = true
                return
            }
        }
    }
    let new_arrs = []
    for (let i = 0; i < arr_data.value.length; i++) {
        let itemObj = arr_data.value[i]
        let param = {
            first_num: itemObj.first_num,
            first_amount: itemObj.first_amount,
            additional_num: itemObj.additional_num,
            additional_amount: itemObj.additional_amount,
            regions: itemObj.regions,
            regions_name: itemObj.regions_name,
        }
        // 当按箱时
        if (objs.value.valuation_type == 3) {
            param.mini_one_amount = itemObj.mini_one_amount
            param.mini_two_amount = itemObj.mini_two_amount
            param.mini_three_amount = itemObj.mini_three_amount
            param.mini_four_amount = itemObj.mini_four_amount
        }
        if (itemObj.province && itemObj.province.length > 0) {
            param.province = itemObj.province
        }
        if (itemObj.city && itemObj.city.length > 0) {
            param.city = itemObj.city
        }
        if (itemObj.county && itemObj.county.length > 0) {
            param.county = itemObj.county
        }
        new_arrs.push(param)
    }
    form_loading.value = true
    let data = {
        shipping_id: sid,
        valuation: new_arrs,
    }
    proxy.$axios
        .post("express/shipping/area", data)
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "添加成功", type: "success" })
                router.back(-1)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}

/**
 * 配置区域
 * @param {Boolean} loading 加载
 * @param {Boolean} form_loading 按钮提交状态
 * @param {Boolean} dialogUpdate 弹窗状态
 * @param {Number} area_type 1是添加，2是编辑
 */
const loading = ref(false)
const form_loading = ref(false)
const dialogUpdate = ref(false)
const area_type = ref(1)

// 添加
const clickAdd = () => {
    dialogUpdate.value = true
    area_type.value = 1
    arr_data.value.map((item) => {
        recursionArrs(item.allRegions, true, true, true)
    })
    regionIndex.value.map((item) => {
        areaArrs.value[item].hidden = true
    })
    reset_index()
}

// 编辑
const edit_index = ref(-1)
const clickEdit = (row, index) => {
    editAssignArrs(row.allRegions, row.regions, [])
    if (Array.isArray(regionIndex.value) && regionIndex.value.length > 0) {
        regionIndex.value.map((item) => {
            areaArrs.value[item].hidden = false
        })
    }
    dialogUpdate.value = true
    area_type.value = 2
    edit_index.value = index
    reset_index()
}

function editAssignArrs(areas, arrs) {
    for (let item of areas) {
        if (arrs.indexOf(item.code) > -1) {
            item.is_select = true
            item.hidden = false
            recursionArrs(item.children, true, true, false) // 递归遍历赋值is_select为true
        }
        if (item.children && item.children.length > 0) {
            editAssignArrs(item.children, arrs)
        }
    }
}

// 重置 显示索引
function reset_index() {
    for (let i = 0; i < areaArrs.value.length; i++) {
        let area = areaArrs.value[i]
        if (!area.hidden) {
            areaIndex.value = i
            for (let pi = 0; pi < area.children.length; pi++) {
                const prov = area.children[pi]
                if (!prov.hidden) {
                    provIndex.value = pi
                    for (let ci = 0; ci < prov.children.length; ci++) {
                        const city = prov.children[ci]
                        if (!city.hidden) {
                            cityIndex.value = ci
                            return
                        }
                    }
                }
            }
        }
    }
}

// 删除
const handleDelete = (row, index) => {
    row.allRegions.map((val) => {
        val.hidden = false
        val.is_select = false
        val.children && recursionArrs(val.children, false, true, false)
    })
    regionIndex.value.map((item) => {
        areaArrs.value[item].hidden = false
    })
    arr_data.value.splice(index, 1)
}

// 取消
const closeArea = () => {
    dialogUpdate.value = false
    if (area_type.value == 2 && edit_index.value > -1) {
        arr_data.value[edit_index.value].allRegions.forEach((val) => {
            val.hidden = true
        })
    }
}

/**
 * 选择区域
 * @param {Number} areaIndex 大区索引
 * @param {Number} provIndex 省份索引
 * @param {Number} cityIndex 城市索引
 * @param {Function} clickArea 点击大区/省/市/区项，及判断该上级是否选中
 * @param {Function} confirmSelect 确认选择区域
 */
const areaIndex = ref(0)
const provIndex = ref(0)
const cityIndex = ref(0)
const curArea = computed(() => {
    return areaArrs.value[areaIndex.value]
})
const curProv = computed(() => {
    return curArea.value.children[provIndex.value]
})
const curCity = computed(() => {
    return curProv.value.children[cityIndex.value]
})
const clickArea = (val, item) => {
    item.is_select = val
    item.children && recursionArrs(item.children, val)
    checked_all()
}
// 是否全选
function checked_all() {
    curCity.value.is_select = getSelectAll(curCity.value.children)
    curProv.value.is_select = getSelectAll(curProv.value.children)
    curArea.value.is_select = getSelectAll(curArea.value.children)
}
function getSelectAll(arrs) {
    for (let i = 0, len = arrs.length; i < len; i++) {
        if (!arrs[i].is_select) {
            return false
        }
    }
    return true
}
const confirmSelect = () => {
    let obj = {
        allRegions: [],
        first_num: "",
        first_amount: "",
        additional_num: "",
        additional_amount: "",
        province: [],
        city: [],
        county: [],
        regions: [],
        regions_name: [],
    }
    // 当按箱时
    if (objs.value.valuation_type == 3) {
        obj.mini_one_amount = ""
        obj.mini_two_amount = ""
        obj.mini_three_amount = ""
        obj.mini_four_amount = ""
    }
    let allname = []
    areaArrs.value.map((area) => {
        if (!area.hidden && area.is_select) {
            area.hidden = true
            obj.allRegions.push(area)
            area.children.map((prov) => {
                if (!prov.hidden) {
                    obj.regions.push(prov.code)
                    obj.province.push(prov.code)
                    allname.push(prov.name)
                }
            })
        }
        if (!area.hidden && !area.is_select) {
            recursionValue(area.children, obj, allname)
        }
    })
    if (!allname || allname.length == 0) {
        proxy.$message({ message: "配送区域不能为空！", type: "warning" })
        areaArrs.value.map((sub) => {
            sub.hidden = false
            sub.is_select = false
        })
        return
    }
    obj.regions_name = allname.join(",")
    dialogUpdate.value = false

    area_type.value == 1 && arr_data.value.push(obj)
    if (area_type.value == 2 && edit_index.value > -1) {
        arr_data.value[edit_index.value] = obj
    }
}
/**
 * 递归遍历
 * @param {Array} arrs 遍历的数组
 * @param {Object} objs 数据插入
 * @param {Array} names 数据名称插入
 */
function recursionValue(arrs = [], objs = {}, names = []) {
    for (let item of arrs) {
        if (!item.hidden && item.is_select) {
            item.hidden = true
            objs.allRegions.push(item)
            objs.regions.push(item.code)
            names.push(item.name)

            let stringCode = String(item.code)
            let codes = stringCode.substring(stringCode.length - 3) // 截取code后三位
            let cityCodes = stringCode.substr(-3, 1) // 大于0则是城市
            let citylastCodes = stringCode.substr(-2, 2) // 值为'00'则为城市，否则为县区
            let provlastCodes = stringCode.substr(2, 1) // 截取第三位数字，特例：大于0是市，例如-海南省-省直辖县(code：469000)
            if (codes === "000" && provlastCodes == "0") {
                objs.province.push(item.code) // 省
            }
            if ((cityCodes != "0" && citylastCodes == "00") || (cityCodes == "0" && provlastCodes != "0")) {
                objs.city.push(item.code) // 市
            }
            if (citylastCodes != "00") {
                objs.county.push(item.code) // 县区
            }
        }
        if (!item.hidden && !item.is_select) {
            recursionValue(item.children, objs, names)
        }
    }
}

const area_click = (index) => {
    areaIndex.value = index
    let area = areaArrs.value[index]
    for (let pi = 0; pi < area.children.length; pi++) {
        const prov = area.children[pi]
        if (!prov.hidden) {
            provIndex.value = pi
            for (let ci = 0; ci < prov.children.length; ci++) {
                const city = prov.children[ci]
                if (!city.hidden) {
                    cityIndex.value = ci
                    return
                }
            }
        }
    }
}
const prov_click = (index) => {
    provIndex.value = index
    const prov = areaArrs.value[areaIndex.value].children[index]
    for (let ci = 0; ci < prov.children.length; ci++) {
        const city = prov.children[ci]
        if (!city.hidden) {
            cityIndex.value = ci
            return
        }
    }
}

// 获取省市区数据
const areaArrs = ref([])
function getArea() {
    proxy.$axios
        .get("config_area.json")
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                areaArrs.value = result
                sid && getDetail()
            }
        })
        .catch((err) => {})
}

/**
 * 递归多维数组对象，赋值选中状态
 * @param {Array} menuTreeList 需要递归的数组
 * @param {Boolean} status 选中状态
 * @param {Boolean} hidden 是否开启设置隐藏状态属性
 * @param {Boolean} hidden 隐藏状态属性值
 */
function recursionArrs(menuTreeList, status = false, hidden = false, hidden_status = true) {
    if (menuTreeList && menuTreeList.length > 0) {
        for (let item of menuTreeList) {
            item.is_select = status
            hidden && (item.hidden = hidden_status)
            item.children && item.children.length > 0 && recursionArrs(item.children, status, hidden, hidden_status)
        }
    }
}
</script>
<script>
export default {
    name: "ConfigArea",
}
</script>

<style lang="less" scoped>
.tip-error {
    flex: none;
    width: 100%;
    clear: both;
    font-size: @font-size-sm;
    color: #ff2626;
    margin-top: @margin-base;
}
:deep(.el-radio) {
    height: auto;
}
.config-tree {
    width: 100%;

    .area-one {
        flex: none;
        width: 25%;
        display: flex;
        flex-direction: column;
        padding: @padding-xs;
        height: 580px;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid #ededed;
        /*滚动条整体样式，高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
        }
        /*滚动条里面小方块*/
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: @gray-4;
        }
        /*滚动条里面轨道*/
        &::-webkit-scrollbar-track {
            border-radius: 10px;
            background: #f1f1f1;
        }
    }

    .area-item {
        display: flex;
        align-items: center;
        width: 100%;
        flex: none;
        padding: 0px @padding-xs;
        .item-text {
            margin-left: @margin-sm;
            cursor: pointer;
            font-size: @font-size-md;
            line-height: @line-height-sm;
            flex: 1;
            overflow: hidden;
        }
        &:hover {
            background-color: @gray-2;
        }
        &.is-active {
            color: @themes;
        }
    }
    :deep(.el-checkbox) {
        flex: none;
        .el-checkbox__inner {
            width: 18px;
            height: 18px;

            &::after {
                width: 4px;
                height: 9px;
                left: 6px;
                top: 1px;
            }
        }
    }
}

.config-box {
    padding: @padding-xl 0px;
}

.config-area {
    width: 100%;
    overflow: hidden;

    .table-mb {
        margin: @margin-mdl 0px;
    }
}
</style>

<style lang="less">
// 修改dialog样式
.dialog-area {
    .el-dialog__header {
        border-bottom: 1px solid #f6f6f6;
        margin-right: 0;
        overflow: hidden;
    }
    .el-dialog__body {
        padding: 0px;
    }
    .el-dialog__footer {
        border-top: 1px solid #f6f6f6;
    }
}
</style>
